<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<html lang="zh-cn" content="">
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-10 column">
                <a href="#" type="button" class="btn btn-default btn_xs"
                   data-toggle="modal" data-target="#clueAdd">
                    新建线索
                </a>

                <table class="table">
                    <thead>
                    <tr>
                        <th>
                            编号
                        </th>
                        <th>
                            线索内容
                        </th>
                        <th>
                            线索状态
                        </th>
                        <th>
                            线索报告人
                        </th>
                        <th>
                            线索报告时间
                        </th>
                        <th>
                            线索追踪人
                        </th>
                        <th>
                            指派追踪时间
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <jsp:useBean id="clues" scope="request" type="java.util.List"/>
                    <c:forEach items="${clues}" var="clue">
                        <tr>
                            <td id="clue_id_tb">${clue.clueId}</td>
                            <td id="clue_content_tb" title="${clue.clueContent}">
                                <div style="width:200px;white-space: nowrap;text-overflow:ellipsis; overflow:hidden;">
                                        ${clue.clueContent}
                                </div>
                            </td>
                            <td id="clue_state_tb">
                                <c:choose>
                                    <c:when test="${clue.clueState==0}">
                                        未验证
                                    </c:when>
                                    <c:when test="${clue.clueState==1}">
                                        验证中
                                    </c:when>
                                    <c:when test="${clue.clueState==2}">
                                        已验证
                                    </c:when>
                                    <c:when test="${clue.clueState==-1}">
                                        作废
                                    </c:when>
                                </c:choose>

                            </td>
                            <td id="clue_reporter_tb">${clue.clueReporter}</td>
                            <td id="clue_report_time_tb">${clue.clueReportTime}</td>
                            <td id="clue_verifier_tb">${clue.clueVerifier}</td>
                            <td id="clue_verify_time_tb">${clue.clueVerifyTime}</td>
                            <td id="clue_btn_tb">
                                <a id="assign_btn" href="#" type="button" class="btn btn-primary btn-xs"
                                   data-toggle="modal"
                                   data-target="#clueAssign" onclick="setID(${clue.clueId})">
                                    指派跟踪</a>
                                <a id="state_btn" href="#" type="button" class="btn btn-danger btn-xs"
                                   data-toggle="modal"
                                   data-target="#clueState" onclick="setID(${clue.clueId})">
                                    更改状态</a>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<%-- 新建--%>
<div class="modal fade" id="clueAdd" tabindex="-1" role="dialog"
     aria-labelledby="clue_add">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="clue_add">新建线索</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="clue_form"
                      action="${pageContext.request.contextPath}/clueAdd"
                      method="post"
                      onsubmit="addClue()">
                    <div class="form-group">
                        <label for="clue_time" class="col-sm-4 control-label">
                            线索时间
                        </label>
                        <div class="col-sm-10">
                            <input type="date" class="form-control" id="clue_time" placeholder="线索时间"
                                   name="clue_time"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="clue_content" class="col-sm-4 control-label">
                            线索内容
                        </label>
                        <div class="col-sm-10">
							<textarea class="form-control" style="height: 280px;" id="clue_content"
                                      placeholder="线索概述"
                                      name="clue_content"></textarea>
                        </div>
                    </div>
                    <input type="hidden" name="clue_reporter" id="clue_reporter">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="submit" class="btn btn-primary">
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>

<%-- 更改--%>
<div class="modal fade" id="clueAssign" tabindex="-1" role="dialog"
     aria-labelledby="clue_assign">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="clue_assign">线索追踪指派</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="clue_assign_form"
                      action="${pageContext.request.contextPath}/clueAssign"
                      method="post" onsubmit="clueAssign()">
                    <div class="form-group">
                        <label for="clue_verifier" class="col-sm-4 control-label">
                            线索指派
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="clue_verifier"
                                   placeholder="指派人" name="clue_verifier"/>
                        </div>
                    </div>
                    <input type="hidden" name="clue_id" id="clue_assign_id">

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="submit" class="btn btn-primary">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="clueState" tabindex="-1" role="dialog"
     aria-labelledby="clue_state_modal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="clue_state_modal">线索状态更改</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="clue_state_form"
                      action="${pageContext.request.contextPath}/clueStateChange"
                      method="post" onsubmit="changeState()">
                    <div class="form-group">
                        <label for="clue_state" class="col-sm-4 control-label">
                            线索状态更改
                        </label>
                        <div class="col-sm-10">
                            <!-- <input type="text" class="form-control" id="clue_state" placeholder="线索状态"
                                   name="clue_state"/> -->

                            <select name="clue_state" id="clue_state">
                                <option value="0">未验证</option>
                                <option value="1">验证中</option>
                                <option value="2">已验证</option>
                                <option value="-1">作废</option>
                            </select>
                        </div>
                    </div>
                    <input type="hidden" name="clue_id" id="clue_state_id">

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="submit" class="btn btn-primary"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    var row_id = null

    function addClue() {
        // let form = document.getElementById('clue_form')
        let reporter = document.getElementById('clue_reporter')
        reporter.value = '11'
        return true;
    }

    function changeState() {
        let clue_id = document.getElementById('clue_state_id')

        clue_id.value = row_id
        return true;
    }

    function clueAssign() {
        let clue_id = document.getElementById('clue_assign_id')

        clue_id.value = row_id
        return true;
    }

    function setID(id) {
        row_id = id
    }


</script>
</body>
</html>
